<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<!-- <view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		<view>
			<image class="img1" src="/static/img/1.jpg"></image>
			<view>
				<button :style="buttonStyle" :class="{ 'clicked': isClicked }" @click="debouncedSaveImage">บันทึกนามบัตร</button>
				<a id="downloadLink" style="display:none;"></a>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'business card',
				imageUrl: '/static/img/1.jpg', // 图片路径
				isSaving: false, // 添加这个属性用于防抖
				isClicked: false, // 新增：用于跟踪按钮是否被点击
			}
		},
		onLoad() {

		},
		methods: {
			// 防抖函数
			debouncedSaveImage() {
				if (this.isSaving) return;
				this.isSaving = true;
				// 切换按钮点击状态
				this.isClicked = true;
				this.saveImage().finally(() => {
					setTimeout(() => {
						this.isClicked = false;
					}, 200); //点击按钮颜色改变 
					
					setTimeout(() => {
						this.isSaving = false;
					}, 500); // 设置防抖时间，例如500毫秒
				});
			},
			
			async saveImage() {
			    const imageUrl = this.imageUrl;
			    const link = document.getElementById('downloadLink');
			
			    // 检查是否为iOS设备，因为iOS Safari对直接下载支持较差
			    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
			
			    if (isIOS) {
			      // 对于iOS设备，尝试使用新的方法来触发下载
			      try {
			        const response = await fetch(imageUrl);
			        const blob = await response.blob();
			        const url = URL.createObjectURL(blob);
			
			        link.href = url;
			        link.download = 'business_card.png'; // 设置下载后的文件名
			        link.click();
			
			        // 释放对象URL
			        setTimeout(() => URL.revokeObjectURL(url), 3000);
			      } catch (error) {
			        console.error('Failed to download image:', error);
					// 无法保存图片，请稍后再试或检查网络连接。
			        alert('ไม่สามารถบันทึกภาพได้โปรดลองอีกครั้งในภายหลังหรือตรวจสอบการเชื่อมต่อเครือข่าย');
			      }
			    } else {
			      // 对于其他设备，使用传统的下载方法
			      link.href = imageUrl;
			      link.download = 'business_card.png'; // 设置下载后的文件名
			      
			      // 触发点击事件进行下载
			      if (document.createEvent) {
			        const event = document.createEvent('MouseEvents');
			        event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			        link.dispatchEvent(event);
			      } else if (link.click) {
			        link.click();
			      }
			    }
			  }
		}
	}
</script>

<style>
	.content {
		display: flex;
		min-height: 700rpx;
		height: 100vh;
		background-image: url('/static/img/back.png');
		background-size: 140% 100%; /* 可根据需要更改为其他值 */
		background-position: center;
		background-repeat: no-repeat;
		/* flex-direction: column; */
		/* align-items: center; */
		justify-content: center;
		background-color: #e5e5e5;
	}
	.img1 {
		height: 630rpx;
		width: 600rpx;
		margin-top: 60%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 6rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	}
	/* 默认按钮样式 */
	button {
	  min-width: 250rpx;
	  max-width: 500rpx;
	  background-color: #F89D26;
	  text-align: center;
	  color: #fff;
	  border: 2px solid rgba(255, 255, 255, 1);
	  font-family: Arial;
	  transition: background-color 0.3s ease; /* 添加过渡效果 */
	}
	
	/* 当按钮被点击时的应用样式 */
	button.clicked {
	  background-color: #d46600; /* 改变背景颜色 */
	}
	
	/* ipone4竖屏 */
	@media only screen and (min-device-width: 200px) and (max-device-width: 374px) and (orientation: portrait) {
	  .content {
	    padding: 50px; /* 根据需要调整内边距 */
		display: flex;
		height: 100vh;
		background-image: url('/static/img/back.png');
		background-size: 140% 100%; /* 可根据需要更改为其他值 */
		background-position: center;
		background-repeat: no-repeat;
		justify-content: center;
	  }
	  .img1 {
	    /* height: auto; */
		height: 590rpx;
		width: 550rpx;
	    max-width: 600rpx;
	    margin-top: 50%; /* 调整顶部间距 */
		margin-bottom: 4%;
		border-radius: 6rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	  }
	  /* 默认按钮样式 */
	  button {
	    min-width: 250rpx;
	    max-width: 350rpx;
		height: 80rpx;
		line-height: 80rpx;
	    background-color: #F89D26;
	    text-align: center;
	    color: #fff;
	    border: 2px solid rgba(255, 255, 255, 1);
	    font-family: Arial;
		font-size: 16px;
	    transition: background-color 0.3s ease; /* 添加过渡效果 */
	  }
	  
	  /* 当按钮被点击时的应用样式 */
	  button.clicked {
	    background-color: #d46600; /* 改变背景颜色 */
	  }
	}
	
	/* iPad 竖屏 */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	  .content {
	    padding: 50px; /* 根据需要调整内边距 */
		display: flex;
		height: 100vh;
		background-image: url('/static/img/back.png');
		background-size: 140% 100%; /* 可根据需要更改为其他值 */
		background-position: center;
		background-repeat: no-repeat;
		justify-content: center;
	  }
	  .img1 {
	    /* height: auto; */
		height: 630rpx;
		width: 600rpx;
	    max-width: 600rpx;
	    margin-top: 29%; /* 调整顶部间距 */
		margin-bottom: 4%;
		border-radius: 6rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	  }
	  /* 默认按钮样式 */
	  button {
	    min-width: 250rpx;
	    max-width: 400rpx;
		height: 60rpx;
		line-height: 60rpx;
	    background-color: #F89D26;
	    text-align: center;
	    color: #fff;
	    border: 2px solid rgba(255, 255, 255, 1);
	    font-family: Arial;
		font-size: 28px;
	    transition: background-color 0.3s ease; /* 添加过渡效果 */
	  }
	  
	  /* 当按钮被点击时的应用样式 */
	  button.clicked {
	    background-color: #d46600; /* 改变背景颜色 */
	  }
	}
	
	/* iPad 竖屏 */
	@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {
	  .content {
	    padding: 50px; /* 根据需要调整内边距 */
		display: flex;
		height: 100vh;
		background-image: url('/static/img/back.png');
		background-size: 140% 100%; /* 可根据需要更改为其他值 */
		background-position: center;
		background-repeat: no-repeat;
		justify-content: center;
	  }
	  .img1 {
	    /* height: auto; */
		height: 1200rpx;
		width: 1300rpx;
	    max-width: 1400rpx;
	    margin-top: 50%; /* 调整顶部间距 */
		margin-bottom: 4%;
		border-radius: 6rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	  }
	  /* 默认按钮样式 */
	  button {
	    min-width: 450rpx;
	    max-width: 700rpx;
		height: 140rpx;
		line-height: 140rpx;
	    background-color: #F89D26;
	    text-align: center;
	    color: #fff;
	    border: 2px solid rgba(255, 255, 255, 1);
	    font-family: Arial;
		font-size: 34px;
	    transition: background-color 0.3s ease; /* 添加过渡效果 */
	  }
	  
	  /* 当按钮被点击时的应用样式 */
	  button.clicked {
	    background-color: #d46600; /* 改变背景颜色 */
	  }
	}
	
	
	/* iPad 横屏 */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	  .content {
	    padding: 50px; /* 根据需要调整内边距 */
	  		display: flex;
	  		height: 100vh;
	  		background-image: url('/static/img/back.png');
	  		background-size: 140% 100%; /* 可根据需要更改为其他值 */
	  		background-position: center;
	  		background-repeat: no-repeat;
	  		justify-content: center;
	  }
	  .img1 {
	    /* height: auto; */
	  		height: 800rpx;
	  		width: 900rpx;
			max-width: 1000rpx;
			margin-top: 18%; /* 调整顶部间距 */
			margin-bottom: 4%;
	  		border-radius: 6rpx;
	  		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	  }
	  /* 默认按钮样式 */
	  button {
	    min-width: 250rpx;
	    max-width: 400rpx;
	  	height: 80rpx;
	  	line-height: 80rpx;
	    background-color: #F89D26;
	    text-align: center;
	    color: #fff;
	    border: 2px solid rgba(255, 255, 255, 1);
	    font-family: Arial;
	    transition: background-color 0.3s ease; /* 添加过渡效果 */
	  }
	  
	  /* 当按钮被点击时的应用样式 */
	  button.clicked {
	    background-color: #d46600; /* 改变背景颜色 */
	  }
	}
</style>
